<template>
    <mu-card class="user-item">
        <mu-list>
            <mu-list-item disabled
                          :title="userInfo.nickname"
                          :describeText="userInfo.id.substr(0,6)">
                <mu-avatar slot="left"
                           :src="userInfo.headimgurl" />
                <mu-icon-button slot="right"
                                icon="edit"
                                @click="onEdit(userInfo)"
                                :tooltip="editToolTip"></mu-icon-button>
            </mu-list-item>
        </mu-list>
        <mu-divider />
        <mu-list>
            <mu-sub-header>资产信息</mu-sub-header>
            <mu-list-item disableRipple
                          describeText="水豆"
                          :title="userInfo.points+''">
                <mu-icon slot="left"
                         value="whatshot"></mu-icon>
            </mu-list-item>
            <mu-list-item disableRipple
                          describeText="房卡"
                          :title="userInfo.cards+''">
                <mu-icon slot="left"
                         value="credit_card"></mu-icon>
            </mu-list-item>
        </mu-list>
        <mu-divider />
        <mu-list>
            <mu-sub-header>用户信息</mu-sub-header>
            <mu-list-item disableRipple
                          describeText="所在城市"
                          :title="(userInfo.province||userInfo.city)?(userInfo.province+' '+userInfo.city):'?'">
                <mu-icon slot="left"
                         value="location_city"></mu-icon>
            </mu-list-item>
            <mu-list-item disableRipple
                          describeText="性别"
                          :title="getSex(userInfo.sex)">
                <mu-icon slot="left"
                         value="wc"></mu-icon>
            </mu-list-item>
            <mu-list-item disableRipple
                          describeText="注册时间"
                          :title="formatDate(userInfo.create_time)">
                <mu-icon slot="left"
                         value="access_time"></mu-icon>
            </mu-list-item>
            <mu-list-item disableRipple
                          describeText="最后登录时间"
                          :title="formatDate(userInfo.last_login_time)">
                <mu-icon slot="left"
                         value="access_time"></mu-icon>
            </mu-list-item>
        </mu-list>
    </mu-card>
</template>
<script>
import {
    getSex,
    formatDate,
    fetchServer,
} from '../../unit';
export default {
    props: ["userInfo", "editToolTip",],
    methods: {
        getSex,
        formatDate,
        onEdit(userInfo) {
            this.$emit("click-edit", userInfo);
        }
    }
}
</script>
<style scoped>
.user-item {
    margin: 10px;
    min-width: 16em;
    max-width: 30em;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1
}
</style>